<template>
  <div class="wrapper">
    <top title="销量图表"></top>
    <!--<div class="header">-->
      <!--<i class="back icon-back-white" @click="jump"></i>-->
      <!--<span class="title">销量图表</span>-->
    <!--</div>-->

    <div class="content-wrapper">
      <div class="bar-chart" ref="bar"></div>
      <div class="line-chart" ref="line"></div>
      <div class="pie-chart" ref="pie"></div>
    </div>
  </div>
</template>

<script>
import top from '../comp/top'
const echarts = require('echarts')

export default {
  name: "chart",
  components:{
    top
  },
  data() {
    return {}
  },
  mounted() {
    this.initBarChart()
    this.initLineChart()
    this.initPieChart()
  },
  methods: {
    initBarChart() {
      const chart = echarts.init(this.$refs.bar)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        color: ['#B22222', '#87CEFA', '#FFC125'],
        legend: {
          left: 'center',
          top: '10px',
          data: ['文玩', '茶叶', '其他']
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          name: '销量',
          splitLine: {
            show: false    //去掉网格线
          }
        },
        series: [
          {
            name: '文玩',
            type: 'bar',
            data: [1589, 1856, 2205, 1807, 1642, 1223]
          },
          {
            name: '茶叶',
            type: 'bar',
            data: [308, 568, 452, 578, 1156, 2365]

          },
          {
            name: '其他',
            type: 'bar',
            data: [809, 1087, 1357, 1154, 1045, 1359]

          }
        ]
      })
    },
    initLineChart() {
      const chart = echarts.init(this.$refs.line)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        color: ['#B22222', '#87CEFA', '#FFC125'],
        grid: {
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        legend: {
          left: 'center',
          top: '10px',
          data: ['文玩', '茶叶', '其他']
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '文玩',
            type: 'line',
            data: [1589, 1856, 2205, 1807, 1642, 1223]
          },
          {
            name: '茶叶',
            type: 'line',
            data: [308, 568, 452, 578, 1156, 2365]

          },
          {
            name: '其他',
            type: 'line',
            data: [809, 1087, 1357, 1154, 1045, 1359]

          }
        ]
      })

    },
    initPieChart() {
      const chart = echarts.init(this.$refs.pie)
      chart.setOption({
        title: {
          text: '销量统计',
          x: 'center',
          y: '10px'
        },
        color: ['#B22222', '#87CEFA', '#FFC125'],
        tooltip: {
          trigger: 'item'
        },
        grid: {},
        legend: {
          orient: 'vertical',
          right: '4%',
          top: '4%',
          data: ['文玩', '茶叶', '其他'],
          textStyle: {
            'fontSize': 14
          }
        },
        series: [
          {
            name: '销售总量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            label: {
              normal: {
                formatter: '{b}:{c}件',
                textStyle: {
                  fontSize: 13
                }
              }
            },
            data: [
              { name: '文玩', value: 11567 },
              { name: '茶叶', value: 13567 },
              { name: '其他', value: 8567 }
            ]
          }
        ]

      })
    },
    jump(){
      window.history.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
  .wrapper {
    position: relative;
    height: 100%;
  }

  .header {
    background: #1cb4d4;
    line-height: 45px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;

    .back {
      position: absolute;
      left: 10px;
      top: 12.5px;
      color: #fff;
      display: inline-block;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .title {
      color: #fff;
      font-size: 16px;
    }
  }

  .content-wrapper {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
  }

  .bar-chart, .line-chart, .pie-chart {
    height: 300px;
    background: #ffffff;
    margin-bottom: 10px;
  }
</style>
